<template>
  <div>
    <h1>自定义事件1---子组件向父组件传递</h1>
    <p>App</p>
    <p v-for="user of userData" :key="user">{{ user }}</p>
    <List ref="dataComp" />
  </div>
</template>

<script>
import _ from "lodash";
import List from "./components/List/List.vue";
export default {
  name: "App",
  components: { List },
  data() {
    return {
      userData: [],
    };
  },
  mounted() {
    //在挂载后 给组件设置一个ref属性
    //console.log(this.$refs.dataComp);
    //使用 组件实例.$on 给某个组件绑定自定义事件(如果给组件设置一个ref属性,则获取的是当前被设置的组件实例)
    this.$refs.dataComp.$on("getdata", this.dataGetHandle);
  },
  methods: {
    //自定义事件1
    getdataHandle(value) {
      //自定义事件主要用来接收子组件的传参(子向父传值)
      //1.我们拿到值以后可以保存在自己的data中,data中尽量保存一个新的值(需要拷贝)
      // this.list = [...list];
      //2.如果数据比较复杂,我们需要对数据进行深拷贝(使用lodash的包提供的方法)
      //当我们的需求只是希望数据展示 并无其他需要 可以使用lodach的方法深拷贝
      this.userData = _.cloneDeep(value);
    },
    //自定义事件2
    dataGetHandle(value) {
      console.log(value, "自定义事件2打印");
      this.userData = value;
    },
    //卸载组件
    /* 
      为什么不在父组件卸载自定义事件  如果在父组件中卸载 则会影响后面的一些操作
    */
  },
};
</script>

<style></style>
